<template>
    <div class="about">
        <a-button style="float:right" type="primary">返回</a-button>
        <h1>
            强制类型转换
        </h1>
        <div>
            <h3>ToBoolean</h3>
            <h5>假值/false</h5>
            <ul style="color:#54b689">
                <li>
                    undefined
                </li>
                <li>
                    null
                </li>
                <li>
                    false
                </li>
                <li>
                    +0
                </li>
                <li>
                    -0
                </li>
                <li>
                    NaN
                </li>
                <li>
                    ""
                </li>
            </ul>
        </div>
        <h3>ToString</h3>
        <strong
            >基本类型值的字符串化规则为: null 转换为 "null" , undefined 转换为
            "undefined" , true 转换为 "true" 。</strong
        >
        <br />
        <br />
        <h3>ToNumber</h3>
        <strong style="color:#54b689">
            true 转换为 1 , false 转换为 0 。 undefined 转换为 NaN , null 转换为
            0
        </strong>
        <hr />
        <a-card title="== 中的隐式强制类型转换最为人诟病的地方是假值的相等比较">
            <a slot="extra">示例代码node环境运行</a>
            <div class="left" style="float:left">
                <h3>程序</h3>
                <a-list>
                    <a-list-item>
                        <code-box :width="30">
                            <pre>
                            "0"==null;          // false 
                            "0"==undefined;     //false
                            "0"==false;         // true --晕！ 
                            "0"==NaN;           //false 
                            "0"==0;             //true 
                            "0"="";             // false
                            </pre>
                        </code-box>
                    </a-list-item>
                    <a-list-item>
                        <code-box :width="30">
                            <pre>
                            false==null;        // false
                            false==undefined;   //false
                            false==NaN;         // false 
                            false==0;           // true --晕！
                            false="";           // true --晕！ 
                            false==[];          // true --晕！ 
                            false=={};          // false
                          </pre
                            >
                        </code-box>
                    </a-list-item>
                    <a-list-item>
                        <code-box :width="30">
                            <pre>
                            ""==null;        // false
                            ""==undefined;   //false
                            ""==NaN;         // false 
                            ""==0;           // true --晕！
                            ""==[];          // true --晕！ 
                            ""=={};          // false
                           </pre
                            >
                        </code-box>
                    </a-list-item>
                    <a-list-item>
                        <code-box :width="30">
                            <pre>
                            0==null;        // false
                            0==undefined;   //false
                            0==NaN;         // false 
                            0==[];          // true --晕！ 
                            0=={};          // false
                           </pre
                            >
                        </code-box>
                    </a-list-item>
                </a-list>

                <strong>强制类型转换导致的js神坑 </strong>
            </div>
            <div class="right" style="float:right">
                <h3>假阳(false positive)</h3>
                <code-box>
                    <pre>
                        "0"==false;         // true --晕！ 
                        false==0;           // true --晕！
                        false="";           // true --晕！ 
                        false==[];          // true --晕！ 
                        ""==0;              // true --晕！
                        ""==[];             // true --晕！ 
                        0==[];              // true --晕！ 
                   </pre
                    >
                </code-box>
                <h2>极端例子</h2>
                <code-box>
                    <pre>
                        [] == ![]            // true
                        2 == [2];            // true
                        "" == [null];        // true
                        0 == "\n";           // true
                   </pre
                    >
                </code-box>
                <textarea cols="50" rows="10">
 
                var a = 42;
                var b = a.toString();
                var c = "3.14";
                var d = +c;
                b; // "42"
                d; // 3.14

            上例中 +c 是 + 运算符的一元(unary)形式(即只有一个操作数)。+ 运算符显式地将 c 转换为数字,而非数字加法运算
               </textarea
                >
                <a-card title="以下js表达式返回false的是">
                    <ul>
                        A 1==true
                    </ul>
                    <ul>
                        B ""==false
                    </ul>
                    <ul>
                        C false==null
                    </ul>
                    <ul>
                        D null==undefined
                    </ul>
                    <a-card-meta
                        title="答案：C"
                        description="在 == 中 null 和 undefined 相等(它们也与其自身相等),null 和 undefined 是一回事,可以相互进行隐式强制类型转换"
                    ></a-card-meta>
                </a-card>
            </div>
        </a-card>
        <br />
        <a-card-meta
            title="总结"
            description=" ① 如果两边的值中有 true 或者 false ,千万不要使用 == 。② 如果两边的值中有 [] 、 '' 或者 0 ,尽量不要使用 == 。"
        >
        </a-card-meta>
        <br />
        <hr />
        <a-card-meta
            title="参考:"
            description="你不知道的JavaScript（中卷）第四章--强制类型转换，4.5宽松相等与严格相等"
        ></a-card-meta>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import CodeBox from '@/components/CodeBox.vue';
@Component({
    components: {
        CodeBox,
    },
})
export default class BrushProblem extends Vue {
    private result: any;
}
</script>
<style lang="less" scoped>
.left {
    display: flex;
    width: 50%;
    flex-direction: column;
    strong {
        em {
            font-size: 1.2rem;
            color: goldenrod;
        }
    }
}
.right {
    width: 50%;
    position: relative;
    padding-left: 1rem;
    letter-spacing: 0.15rem;

    :before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 100%;
        background: #54b689;
        position: absolute;
        left: 0;
        top: 0;
    }
    textarea {
        display: flex;
        flex-direction: column;
        font-size: 1.1rem;
        color: #54b689;
    }
}
</style>
